<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-08-12 16:12:52
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24">
            <el-card :style="`height:${view.height - 140}px; padding:10px`">
                <el-row style="margin-bottom: 20px;">
                    <el-col :span="24" style="display: flex;justify-content:flex-end">
                        <el-button type="success" :icon="Plus" size="small"
                            @click="addType.visible = true">新增类别</el-button>
                    </el-col>
                </el-row>
                <el-card class="process-type-card" :style="`height:${view.height - 240}px; padding:10px`"
                    v-loading="processTypeLoading">
                    <el-collapse v-model="activeNames" accordion @change="handleChange">
                        <el-collapse-item :name="type.id" v-for="type in processTypeList">
                            <template #title>
                                <div class="type-title-container" :style="`width:${view.width - 500}px;`">
                                    <div class="type-title-warp">
                                        <span class="type-title">
                                            {{ type.name }}
                                        </span>
                                        <p class="type-des">
                                            <el-icon class="type-icon">
                                                <info-filled />
                                            </el-icon>
                                            {{ type.desc }}
                                        </p>
                                    </div>
                                    <el-button type="primary" size="small" plain :icon="Edit"
                                        @click.stop="editTypeDiaHandler(type)">修改</el-button>
                                    <el-button type="primary" plain size="small"
                                        @click.stop="addProcessDiaHandler(type.id)">
                                        添加</el-button>
                                    <el-popconfirm title="确定要删除当前流程分类么?" @confirm="deleteType(type.id)">
                                        <template #reference>
                                            <el-button type="danger" size="small" plain :icon="Delete"
                                                @click.stop="">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </div>
                            </template>
                            <div class="process-cards-con" :style="`height:${view.height - 440}px;`"
                                v-loading="graphsLoading">
                                <el-empty v-if="graphs.length == 0" description="暂无流程" :image-size="300">
                                </el-empty>
                                <el-card class="process-item-card" v-for="graph in graphs" :key="graph.id">
                                    <el-image :src="graph_cover" style="height: 90px;" />
                                    <div class="interduce" :title="graph.name">
                                        <div class="btns">
                                            <!-- <el-button-group> -->
                                              <!--   <el-button plain type="primary" size="small" :icon="Edit"
                                                    @click="enterToGraph(graph.id)">编辑</el-button> -->
                                                <el-popconfirm title="确定要移除当前流程么?"
                                                    @confirm="removeGraphType(graph.id, type.id)">
                                                    <template #reference>
                                                        <el-button plain type="primary" size="small"
                                                            :icon="Delete">移除</el-button>
                                                    </template>
                                                </el-popconfirm>
                                              <!--   <el-popconfirm title="确定要复制当前流程么?"
                                                    @confirm="copyProcess(graph.id, type.id)">
                                                    <template #reference>
                                                        <el-button plain type="primary" size="small"
                                                            :icon="DocumentCopy">复制</el-button>
                                                    </template>
                                                </el-popconfirm> -->
                                            <!-- </el-button-group> -->
                                        </div>
                                        <h2 :title="graph.name">{{ graph.name }}</h2>
                                        <p class="des" :title="graph.desc">
                                            {{ graph.desc }}
                                        </p>
                                        <p class="time">
                                            {{ utils.formatDate(graph.createDate) }}
                                           <!--  <el-button type="success" size="small" text :icon="VideoPlay"
                                                @click="executeGraph(graph)">
                                                流程执行</el-button> -->
                                        </p>
                                    </div>
                                </el-card>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>
            </el-card>
        </el-col>
    </el-row>
    <add-process-type ref="addTypeRef" :typeDia="addType" @dialogSubmit="addTypeHandler"
        @closeaddTypeDiaDialog="closeAddTypeDia"></add-process-type>
    <editProcessType ref="editTypeRef" :typeDia="editType" @dialogSubmit="editTypeHandler"
        @closeaddTypeDiaDialog="closeEditTypeDia"></editProcessType>
    <addProcess ref="editTypeRef" :addToTypeDia="addProcessDia" @dialogSubmit="addProcessDiaSubmit"
        @closeAddProcessDialog="closeAddProcessDialog"></addProcess>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import {
    Delete,
    Edit,
    DocumentCopy,
    Plus, VideoPlay
} from '@element-plus/icons-vue'
import graph_cover from '@/assets/img/graph_cover.png'
import utils from "@/utils/util";
import HttpService from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";
import addProcessType from '@/components/processType/addProcessType.vue'
import editProcessType from "@/components/processType/editProcessType.vue";
import addProcess from "@/components/processType/addProcess.vue";
import router from "@/router";

onMounted(() => {
});

let addType = reactive({
    visible: false,
    name: "",
    des: "",
})
let editType = reactive({
    id: "",
    visible: false,
    name: "",
    des: "",
})
let addProcessDia = reactive({
    visible: false,
    id: ""
})
const processTypeList = ref([])
const processTypeLoading = ref(false)
const graphs = ref([])
const graphsLoading = ref(false)

const executeGraph = function (process) {
    router.push('/index/general/processManage/executeGraph/' + process.id)
}

const enterToGraph = function (process) {
    router.push('/index/general/processManage/processGraph/' + process.id)
}
const getprocessTypeList = function () {
    let params = {
    };
    processTypeLoading.value = true
    processTypeList.value.length = 0
    HttpService.processTypeListManage.processTypes(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200) {
                    res.data.data.map((item, index) => {
                        processTypeList.value.push(item);
                    });
                } else {
                    console.log("获取信息失败" + res);
                }
                processTypeLoading.value = false
            }, 300)
        },
        (error) => {
            console.log(error);
            processTypeLoading.value = false
        }
    );
};

const getGraphsByType = function (type) {
    let params = {
        id: type
    };
    graphs.value.length = 0;
    graphsLoading.value = true
    HttpService.processListManage.getGraphsByType(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200 && res.data.data) {
                    res.data.data.map((item, index) => {
                        graphs.value.push(item);
                    });
                    graphsLoading.value = false
                    console.log(graphs.value)
                } else {
                    console.log("获取流程失败" + res);
                    graphsLoading.value = false
                }
            }, 300)
        },
        (error) => {
            console.log(error);
            graphsLoading.value = false
        }
    );
};

const deleteType = function (type) {
    let params = {
        id: type
    };

    HttpService.processTypeListManage.deleteType(
        params,
        (res) => {

            if (res.status == 200) {
                getprocessTypeList()
                if (!res.data.success) {
                    ElMessage({
                        message: res.data.message,
                        type: 'warning',
                    })
                } else {
                    ElMessage({
                        message: res.data.message,
                        type: 'success',
                    })
                }
            } else {
                console.log("获取流程类型失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    if (val) {
        getGraphsByType(val)
    }
}
var view = reactive({
    height: window.innerHeight,
    width: window.innerWidth
});

const editTypeDiaHandler = function (type) {
    editType.id = type.id
    editType.name = type.name
    editType.des = type.desc
    editType.visible = true
}

const addTypeHandler = function (type) {
    let params = {
        name: type.name,
        desc: type.des
    };
    HttpService.processTypeListManage.addType(
        params,
        (res) => {
            if (res.status == 200) {
                ElMessage({
                    message: '类型添加成功',
                    type: 'success',
                })
                getprocessTypeList()
            } else {
                console.log("流程类型添加失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const editTypeHandler = function (type) {
    let params = {
        id: type.id,
        name: type.name,
        desc: type.des
    };
    HttpService.processTypeListManage.editType(
        params,
        (res) => {
            if (res.status == 200) {
                ElMessage({
                    message: '类型添加成功',
                    type: 'success',
                })
                getprocessTypeList()
            } else {
                console.log("流程类型添加失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}


const closeAddTypeDia = function () {
    addType.visible = false
}
const closeEditTypeDia = function () {
    editType.visible = false
}
const closeAddProcessDialog = function () {
    addProcessDia.visible = false
}
const addProcessDiaHandler = function (id) {
    addProcessDia.visible = true
    addProcessDia.id = id
}

const addProcessDiaSubmit = function (submitData) {
    let params = {
        id: submitData.type,
        processes: submitData.processes,
    };
    HttpService.processTypeListManage.batchAddGraphType(
        params,
        (res) => {
            if (res.status == 200) {
                ElMessage({
                    message: '类型添加成功',
                    type: 'success',
                })
                getGraphsByType(submitData.type)
            } else {
                console.log("流程类型添加失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const removeGraphType = function (id, type) {
    let params = {
        id,
    };
    HttpService.processTypeListManage.removeGraphType(
        params,
        (res) => {
            if (res.status == 200) {
                ElMessage({
                    message: '类型添加成功',
                    type: 'success',
                })
                getGraphsByType(type)
            } else {
                console.log("流程类型添加失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const copyProcess = function (id, type) {
    let params = {
        id,
    };
    HttpService.processListManage.copyProcess(
        params,
        (res) => {
            if (res.status == 200) {
                ElMessage({
                    message: '复制流程成功',
                    type: 'success',
                })
                getGraphsByType(type)
            } else {
                console.log("复制流程失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}
/* window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100); */


getprocessTypeList()
</script>
<style lang="scss" scoped>
.process-cards-con {
    padding: 20px;
    overflow: auto;

    .process-item-card {
        width: 370px;
        height: 130px;
        border-radius: 5px;
        margin: 0 20px 20px 0;
        float: left;
    }
}

.type-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .type-title-warp {
        display: flex;
        width: 100%;

        .type-title {
            font-weight: 600;
            margin-right: 20px;
            font-size: 16px;
        }

        .type-des {
            color: #999;
            display: flex;
            align-items: center;

            .type-icon {
                font-size: 18px;
                margin-right: 5px;
            }
        }
    }


}
</style>
<style lang="scss">
.process-type-card {
    overflow: auto;

    .el-card__body {
        padding: 0 20px;
    }

    .process-item-card {
        .el-card__body {
            padding: 0;
            display: flex;
            align-items: center;

            .interduce {
                padding-left: 10px;
                width: 260px;

                .btns {
                    display: flex;
                    justify-content: flex-end;
                }

                h2 {
                    font-size: 14px;
                    font-weight: 500;
                    padding: 5px 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis
                }

                .des {
                    color: #999;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    /* 将对象作为弹性伸缩盒子模型显示 */
                    display: -webkit-box;
                    /* 限制在一个块元素显示的文本的行数 */
                    /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
                    -webkit-line-clamp: 2;
                    /* 设置或检索伸缩盒对象的子元素的排列方式 */
                    -webkit-box-orient: vertical;
                    line-height: 20px;
                    height: 40px;
                }

                .time {
                    color: #999;
                    font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

}
</style>